<template>
  <el-breadcrumb class="el-breadcrumb" :separator-icon="ArrowRight">
      <template  v-for="(item,index) in lists" :key="index">
        <el-breadcrumb-item v-if="item.children">
          {{item.meta.title}}
        </el-breadcrumb-item>
        <el-breadcrumb-item v-else :to="{path: item.path}">
          {{item.meta.title}}
        </el-breadcrumb-item>
      </template>
  </el-breadcrumb>
</template>

<script>
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
export default {
  name: 'breadcrumb-router',
  setup () {
    return {
      lists: ref(''),
      ArrowRight
    }
  },
  watch: {
    $route (to, from) {
      let matched = to.matched
      if (matched.length && matched[0].name !== 'home') {
        matched = [{ path: '/', name: 'home', meta: { title: '首页' } }, ...matched]
        // matched = [ ...matched]
      }
      this.lists = matched
    }
  }
}
</script>

<style scoped>

.el-breadcrumb{
  margin: 10px;

}
.el-breadcrumb{}


</style>
